Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / LxmfUserIcon.vue

Displaying Raw • Download

Ta5d6ff<!-- SPDX-License-Identifier: 0BSD AND MIT -->

Ta5d6ff<template>

Ta5d6ff<div

v-if="customImage"

class="rounded-full overflow-hidden shrink-0 flex items-center justify-center"

:class="resolvedShellClass"

:style="iconStyle"

>

<img :src="customImage" class="w-full h-full object-cover" />

Ta5d6ff</div>

Ta5d6ff<div

v-else-if="iconName"

class="p-[10%] rounded-full shrink-0 flex items-center justify-center"

:style="[iconStyle, { 'background-color': finalBackgroundColor }]"

:class="resolvedShellClass"

>

<MaterialDesignIcon :icon-name="iconName" class="size-full" :style="{ color: finalForegroundColor }" />

Ta5d6ff</div>

Ta5d6ff<div

v-else

class="bg-gray-100 dark:bg-zinc-800 text-gray-400 dark:text-zinc-500 p-[10%] rounded-full shrink-0 flex items-center justify-center border border-gray-200 dark:border-zinc-700"

:class="resolvedShellClass"

:style="[iconStyle, { 'background-color': fallbackBackgroundColor }]"

>

<MaterialDesignIcon icon-name="account" class="w-full h-full" />

Ta5d6ff</div>

Ta5d6ff</template>

Ta5d6ff<script>

Tff7b72import Te6edf3MaterialDesignIcon Tffa657from Ta5d6ff"./MaterialDesignIcon.vue";

Tff7b72export Tff7b72default {

Te6edf3name: Ta5d6ff"LxmfUserIcon",

Te6edf3components: {

Te6edf3MaterialDesignIcon,

},

Te6edf3props: {

Te6edf3customImage: {

Te6edf3type: Te6edf3String,

Te6edf3default: Ta5d6ff"",

},

Te6edf3iconName: {

Te6edf3type: Te6edf3String,

Te6edf3default: Ta5d6ff"",

},

Te6edf3iconForegroundColour: {

Te6edf3type: Te6edf3String,

Te6edf3default: Ta5d6ff"",

},

Te6edf3iconBackgroundColour: {

Te6edf3type: Te6edf3String,

Te6edf3default: Ta5d6ff"",

},

Te6edf3iconClass: {

Te6edf3type: Te6edf3String,

Te6edf3default: Ta5d6ff"",

},

Te6edf3iconStyle: {

Te6edf3type: Te6edf3Object,

Te6edf3default: () => ({}),

},

},

Te6edf3computed: {

Te6edf3resolvedShellClass() {

Te6edf3const Tff7b72extra = (Te6edf3this.Te6edf3iconClass || Ta5d6ff"").Tffa657trim();

Tff7b72if (

Ta5d6ff /\bsize-[\w.]+\b/.Te6edf3test(Tff7b72extra) ||

/\Te6edf3bw-[\Tffa657w.]+\Te6edf3b/.Te6edf3test(Tff7b72extra) ||

/\Te6edf3bh-[\Tffa657w.]+\Te6edf3b/.Te6edf3test(Tff7b72extra) ||

/\Te6edf3bmin-w-/.Te6edf3test(Tff7b72extra) ||

/\Te6edf3bmin-h-/.Te6edf3test(Tff7b72extra)

) {

Tff7b72return Tff7b72extra;

}

Tff7b72return [Ta5d6ff"size-6", Tff7b72extra].Te6edf3filter(Te6edf3Boolean).Tffa657join(Ta5d6ff" ").Tffa657trim();

},

Te6edf3finalForegroundColor() {

Tff7b72return Te6edf3this.Te6edf3iconForegroundColour && Te6edf3this.Te6edf3iconForegroundColour !== Ta5d6ff""

? Te6edf3this.Te6edf3iconForegroundColour

: Ta5d6ff"#6b7280";

},

Te6edf3finalBackgroundColor() {

Tff7b72if (Te6edf3this.Te6edf3iconBackgroundColour && Te6edf3this.Te6edf3iconBackgroundColour !== Ta5d6ff"") {

Tff7b72return Te6edf3this.Te6edf3iconBackgroundColour;

}

Tff7b72return Ta5d6ff"#e5e7eb";

},

Te6edf3fallbackBackgroundColor() {

Tff7b72if (Te6edf3this.Te6edf3iconBackgroundColour && Te6edf3this.Te6edf3iconBackgroundColour !== Ta5d6ff"") {

Tff7b72return Te6edf3this.Te6edf3iconBackgroundColour;

}

Tff7b72return Ta5d6ff"";

},

},

};

Ta5d6ff</script>